

<div class="container-fluid">
    <div class="toolbar">
        <button class="btn btn-success btn-sm" id="add-bush-btn" data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-type="add">添加</button>
    </div>

    <table id="table"></table>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title" data-type="">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="form-title"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="web-name"  class="control-label">名称：</label>
                        <input type="text" class="form-control" id="web-name">
                    </div>
                    <div class="form-group">
                        <label for="web-tmpl"  class="control-label">模版：</label>
                        <select  class="form-control" id="web-tmpl">
                            <option value="default">默认模版</option>
                            <option value="rich">丰富模版</option>
                        </select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"  >关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        let app = {

            table: $('#table'),
            modal: $('#modal-form'),
            submit: $('#submit'),
            webNameObj:$('#web-name'),
            webTmplObj:$('#web-tmpl'),
            init: function () {
                let self=this;
                self.initTable();
                self.event();
            },
            initTable: function () {
                let self = this;
                self.table.destroyTable().initTable({
                    method: 'get',
                    url: '/admin/website/page',
                    queryParams: function (params) {
                        //补充自定义参数
                        return {
                            size: params.pageSize,
                            page: params.pageNumber,
                        };
                    },
                    responseHandler: function (res) {
                        //在ajax获取到数据，渲染表格之前，修改数据源
                        //该项返回的为数据源内的二级列表data
                        return {
                            rows: res.data.rows,
                            total: res.data.total,
                        };

                    },
                    columns: [
                        {
                            title: '实例KEY',
                            visible: true,
                            align: 'center',
                            field: 'uuid',
                            valign: 'middle',
                            width: "20%"
                        },
                        {
                            title: '网页实例',
                            field: 'name',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width: "20%"
                        },
                        {
                            title: '模版',
                            field: 'tmpl',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width: "10%",
                            formatter: function (value, row, index) {

                                if (value === "default") {
                                    return "<span class='btn-success btn-sm'>" + value + "</span>"
                                }

                                if (value === "rich") {
                                    return "<span class='btn-danger btn-sm'>" + value + "</span>"
                                }

                                return "<span class='btn-primar btn-sm'>" + value + "</span>"

                            }
                        },
                        {
                            title: '状态',
                            field: 'status',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width: "20%",
                            formatter: function (value, row, index) {
                                if (value === 1) {
                                    return '<span class="btn-primary btn-sm">应用中</span>'
                                }
                                return '<span class="btn-danger btn-sm">停用</span>'
                            }
                        },
                        {
                            title: '操作',
                            field: 'operator',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width: "30%",
                            formatter: function (value, row, index) {
                                value = row["id"]
                                let statusTxt = "启用"
                                let dataStatus = 1
                                let statusClass = "btn-primary"
                                let status = row["status"]
                                let previewUrl = "/website/site/" + row["tmpl"] + "/" + row["uuid"]
                                if (status === 1) {
                                    dataStatus = 2
                                    statusTxt = "停用"
                                    statusClass = "btn-danger"
                                }
                                let designUrl = "/admin/website/design?tmpl=" + row["tmpl"] + "&id=" + value + "&ts=" + "${.ts}"
                                return "<div class='btn-group operator-group' ><a    href='" + previewUrl + "'  class='btn btn-xs  btn-cyan'  data-id=" + value + ">预览</a><a class='btn btn-xs dash-status btn-danger' data-status='0'  data-id=" + value + ">删除</a><a  data-type='info' class='btn btn-xs  btn-success ' data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id=" + value + ">查看</a><a  data-type='edit' class='btn btn-xs  btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id=" + value + ">编辑</a><a class='btn btn-xs dash-status " + statusClass + "'  data-type='del'  data-status=" + dataStatus + "   data-id=" + value + ">" + statusTxt + "</a><a href='" + designUrl + "'  class='btn btn-xs  btn-info'  data-id=" + value + ">去设计</a></div>"
                            }
                        }
                    ]
                });
            },

            event: function () {
                let self = this;
                self.modal.on('show.bs.modal', function (event) {
                    let button = $(event.relatedTarget),
                        dType = button.data('type'),
                        modal = $(this),
                        nameObj = self.webNameObj,
                        id = button.data('id'),
                        tmplObj = self.webTmplObj;

                    modal.attr('data-id', id)
                    modal.attr('data-type', dType)

                    if (dType !== 'add') {

                        doGet("/admin/website/find?id=" + id, function (data) {

                            nameObj.val(data.data.name)
                            tmplObj.val(data.data.tmpl)

                        }, function (data) {

                        })

                    }

                    switch (dType) {
                        case 'add':
                            modal.find('.modal-title').text('创建')
                            return
                        case 'info':
                            modal.find('.modal-title').text('查看')
                            self.readOnlyForm();
                            return
                        case 'edit':
                            modal.find('.modal-title').text('编辑')
                            return

                    }


                }).on("hide.bs.modal", function (event) {

                    self.resetForm();

                })
                self.submit.click(function (event) {

                    let modal = self.modal,
                        dType = modal.attr('data-type'),
                        name = self.webNameObj.val(),
                        tmpl = self.webTmplObj.val(),
                        id = parseInt(modal.attr("data-id"))

                    switch (dType) {
                        case 'edit':
                            modal.find('.modal-title').text('编辑')
                            doPost("/admin/website/update", {
                                "name": name,
                                "id": id,
                            }, function (data) {
                                self.initTable();
                            })
                            return
                        case 'add':
                            modal.find('.modal-title').text('添加')
                            doPost("/admin/website/add", {
                                "name": name,
                                "tmpl": tmpl,
                            }, function (data) {
                                self.initTable();
                            }, function (data) {

                            })
                            return;


                    }
                });
                self.table.on('click', '.dash-status', function () {


                    let id = parseInt($(this).attr('data-id'));
                    let status = parseInt($(this).attr('data-status'));
                    if (status == 0) {
                        //删除
                        doPost("/admin/website/remove", {id: id, status: status}, function (data) {
                            self.initTable();
                        })
                        return
                    }

                    doPost("/admin/website/enable", {id: id, status: status}, function (data) {
                        self.initTable();
                    })


                })

            },
            readOnlyForm:function(){
                let self=this;
                //不可编辑
                self.webNameObj.prop("readonly", true);
                self.webTmplObj.prop('disabled', true);
            },
            resetForm:function(){
                let self=this;
                //不可编辑
                self.webNameObj.prop("readonly", false).val("");
                self.webTmplObj.prop("disabled",false);
            },


        }
        app.init();
        
    });


</script>
